<template>
  <div class="home">
    <div @click="headerishow" class="header"><van-icon name="shopping-cart-o" />{{shoppingList.length}}</div>
    <el-container>
      <el-header >
        <div class="home_nav_header">
          <div>手机</div>
          <div>笔记本电脑</div>
          <div>平板&穿戴</div>
          <div>智能家居</div>
          <div>配件</div>
          <div>企业购</div>
        </div>
      </el-header>
      <el-main>
        <!-- 轮播图 -->
        <div class="block">
          <el-carousel class="block_box">
            <el-carousel-item v-for="(item,index) in swiperList" :key="index" class="block_box">
              <img :src="item.url" width="100%" height="100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 商品 -->
        <div class="block_box_item">
          <el-row :gutter="10">
          <el-col :xs="12" :sm="8" :md="6" v-for="(item,index) in listitem" :key="index">
            <div class="grid-content bg-purple">
             <div class="home_item_context">
                <img :src="item.url" width="100%">
              <p style=" font-size: 15px;">名称：{{item.title}}</p>
              <p>商品价格：{{item.price}}</p>
              <span class="gotoshopping" @click="gotoshopping(item)">加入购物车</span>
             </div>
            </div>
          </el-col>
        </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      swiperList: [],
    };
  },
  computed: {
    listitem(){
       return this.$store.state.listitem
    },
    shoppingList(){
       return this.$store.state.shoppingList
    }
   
  },
  mounted() {
    this.$store.dispatch('LISTITEM')
    axios
      .get("./swiper.json")
      .then(res => {
        console.log(res.data[0].swiper);
        this.swiperList = res.data[0].swiper;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods:{
    headerishow(){
     this.$router.push("/about")
    },
    gotoshopping(item){
      console.log(item);
      this.$store.dispatch('SHOPPING',item)
    }
  }
};
</script>
<style  scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  line-height: 0px;
  overflow: hidden;
}
/deep/ .el-main {
  padding: 0;
}
.home_nav_header {
  display: flex;
  justify-content: space-around;
}
.home_nav_header > div:hover {
  border-bottom: 1px solid red;
  color: aliceblue;
}
.header{
  font-size: 22px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  margin: 3px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
}
.block {
  width: 100%;
  height: 350px;
}
/deep/ .block_box {
  height: 350px;
}
/deep/ .el-carousel--horizontal {
  height: 350px;
}
.block_box_item{
  margin-top: 10px;
}
.header{
  display: none;
}
@media screen and (max-width:768px){
  .home_nav_header{
    font-size: 14px;
  }
  .block{
    width: 100%;
    height: 200px;
  }
  .block_box{
    width: 100%;
    height: 200px;
  }
  .grid-content bg-purple{
    width: 50%;
  }
  /deep/ .el-carousel__container{
    height: 200px;
  }
  .home_nav_header{
    display: none;
  }
  .header{
    display: block;
    position: absolute;
    top: 18px;
    left: 15px;
  }
  *{
    font-size: 15px;
  }
}
.gotoshopping{
  display: block;
  width: 100px;
  padding: 4px;
  color: red;
  border:2px solid orangered;
  /* border-radius: 20px; */
  margin-left: 20px;
  text-align: center;

}

</style>
